<template>
	<div class="header">
		<div class="one">
			<span class="iconfont" @click="toHome">&#xe625;</span>
			<h3>城市选择</h3>
			<span></span>
		</div>
		<div class="two">
			<ul>
				<li>境内</li>
				<li class="on">境外.港澳台</li>
			</ul>
		</div>
		
	</div>
</template>

<script>
	//	封装
	export default{
		 methods:{
		 	toHome(){
		 		 this.$router.push("./")
		 	}
		 }
	}
	
</script>

<style>
	.header .one{
		display: flex;
		font-size: .16rem;
		height: .44rem;
		line-height: .44rem;
		background: #00bcd4;
		color: #fff;
	}
	.header .one span{
		text-align: center;
	    width: .4rem;
	}
	.header .one h3{
		flex: 1;
		text-align: center;
	}
	.header .two{
		display: flex;
		font-size: .16rem;
		height: .3rem;
		background: #00bcd4;
		color: #00bcd4;
	}
	.header .two ul{
		width: 80%;
		margin: 0px auto;
	}
	.header .two li{
		width: 49%;
		float: left;
		text-align: center;
		background:#fff ;
		height: .2rem;
		line-height: .2rem;
	}
	.header .two .on{
		background: none;
		border: solid 1px #fff;
		color: #fff;
		height: .18rem;
		line-height: .18rem;
	}
</style>
